!border_color = #9F8B66
!border_radius = 3px
!toolbar_border_radius = 2px
!infobar_height = 16px
!infobar_padding = 4px

=block-image
  :display block
  :border none
  :margin 0

div.loki
  :border = 1px solid !border_color
  :border-top-left-radius = !border_radius
  :border-top-right-radius = !border_radius
  :-webkit-border-top-left-radius = !border_radius
  :-webkit-border-top-right-radius = !border_radius
  :-moz-border-radius-topleft = !border_radius
  :-moz-border-radius-topright = !border_radius
  :background #E0DCD4
  :font
    :family Verdana, Helvetica, Arial, sans-serif
    :size 10pt
  
  .loading
    :text-align center
    :margin 3em 0
    :color = (!border_color - #555)
    
  iframe.visual_frame
    :width 100%
    :clear left
  
  ul.toolbar
    :clear left
    :display block
    :list-style none
    :margin 2px
    :padding 0
    :overflow auto
    
    li
      :float left
      :margin 0 2px 0 0
      :padding 0
      
      a
        :border 1px solid transparent
        :border-radius = !toolbar_border_radius
        :-webkit-border-radius = !toolbar_border_radius
        :-moz-border-radius = !toolbar_border_radius
        :display block
        :padding 1px
        
        &.button:hover
          :border 1px solid #264572
          :background #99BEDB
          
        &.disabled:hover
          :border 1px solid transparent
          :background transparent
        
        &.button img
          +block-image
        
        &.active
          :border 1px solid #2C4362
          :background #B3C2CC
          
  .infobar
    :border-top = 1px solid !border_color
    :padding = !infobar_padding (!infobar_padding + 21px)
    :position relative
    :color black
    :margin 0
    :font-size = (!infobar_height - 4)
    :min-height = !infobar_height
    :line-height = !infobar_height
    :background
      :repeat no-repeat
      :position = !infobar_padding !infobar_padding
    
    .close
      :display block
      :width 16px
      :position absolute
      :top = !infobar_padding
      :right = !infobar_padding
      
      .cross_icon
        +block-image
      
    a.message
      :display block
      :color black
      :text-decoration none
      
  .warn, .warning
    :background-color #FFF9BB
    :background-image url('../../plugins/core/icons/warning.png')
    
  .error
    :background-color #F0BFAF
    :background-image url('../../plugins/core/icons/exclamation.png')
    
  .info
    :background-color #E2F2FD
    :background-image url('../../plugins/core/icons/information.png')
  
  .debug
    :background-color #DAFCBB
    :background-image url('../../plugins/core/icons/bug_exclamation.png')
